<!DOCTYPE html>  <!--文档声明-->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">  <!--英文的编码状态-->
<head th:replace="theme/default/common :: head(~{::title})">  <!--不可见内容-->
    <meta charset="UTF-8">  <!--编码格式-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0"><!--适配手机浏览-->
    <title th:text="|${webname} - ${webTitle}|">三岁的博客 - 人间本不该令我这么欣喜的，但是你来了！！</title>   <!--标题-->
    <!--引入css样式-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <!--引入semantic的js-->
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <link rel="stylesheet" href="../../../static/css/me.css">
    <link rel="stylesheet" href="../../../static/css/animate.css">
    <link rel="stylesheet" href="../../../static/lib/aplayer/APlayer.min.css">

    <style type="text/css">
        .blink {
            position: relative;
        }

        .blink:nth-child(1) {
            -webkit-animation: jump 1s linear 0s infinite alternate;
        }

        @-webkit-keyframes jump {
            0% {
                top: 0px;
            }
            50% {
                top: -2px;
            }
            100% {
                top: 3px;
            }
        }

    </style>
</head>
<!--内容编写区-->
<body>

<!--背景-->
<canvas id="evanyou" width="1920" height="934"></canvas>
<!--导航-->
<!--m-shadow-small 阴影-->
<nav th:replace="theme/default/common :: menu(1)" class="ui attached segment m-padded-tb-mini animated bounce">
    <div class="ui container">
        <div class="ui secondary stackable menu">
            <h2 class="ui black header item">三岁Blog</h2>
            <a href="#" class="m-item item m-mobile-hide-item"><i class="mini home icon"></i>&nbsp&nbsp首页</a>
            <span class="m-mobile-hide" style="width: 1px;margin-top: 20px;height: 20px; background: darkgray;"></span>
            <a href="#" class="m-item item m-mobile-hide-item"><i class="mini idea icon"></i>&nbsp&nbsp分类</a>
            <span class="m-mobile-hide" style="width: 1px;margin-top: 20px;height: 20px; background: darkgray;"></span>
            <a href="#" class="m-item item m-mobile-hide-item"><i class="mini tags icon"></i>&nbsp&nbsp标签</a>
            <span class="m-mobile-hide" style="width: 1px;margin-top: 20px;height: 20px; background: darkgray;"></span>
            <a href="#" class="m-item item m-mobile-hide-item"><i class="mini clone icon"></i>&nbsp&nbsp归档</a>
            <span class="m-item item m-mobile-hide">
            <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tv&skin=durian" frameborder="0" width="255"
                    height="25" allowtransparency="true"></iframe>
            </span>
            <div class="m-item right item m-mobile-hide-item">
                <div class="ui icon inverted input"><!--transparent 属性是设置全透明黑色-->
                    <input type="text" placeholder="输入关键词搜索...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle basic black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>
<!--中间内容-->
<div id="waypoint" class="m-container m-padded-tb-big">
    <div class="ui container">
        <div class="ui stackable grid">
            <!--左边博客列表-->
            <div class="eleven wide column animated bounceIn">
                <!--header-->
                <div class="ui top attached segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <h3 class="ui teal header">博客</h3>
                        </div>
                        <div class="right aligned column">
                            共<h2 class="ui orange header m-inline-block m-text-spaced" th:text="${pageInfo.total}">
                            9 </h2>篇
                        </div>
                    </div>
                </div>
                <!--content-->
                <div class="ui attached vertical segment">
                    <!--第一篇文章-->
                    <div class="ui padded segment m-padded-tb-large m-text" th:each="blog:${pageInfo.list}">
                        <div class="ui mobile reversed stackable grid">
                            <!--<div class="eleven wide column">-->
                            <div class="wide column">
                                <h3 class="ui header">
                                    <a href="#" th:href="@{/blogs/{id}(id=${blog.blogId})}" target="_blank"
                                       class="m-black" th:text="${blog.title}">
                                        三岁博客
                                    </a>
                                </h3>
                                <p class="m-text" th:text="|${blog.description}......|">
                                    前端用到的插件及地址如下前端用到的插件及地址如下前端用到的插件及地址如下前端用到的插件及地址如下</p>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="http://q1.qlogo.cn/g?b=qq&nk=1578393930&s=100" alt="图片正在路上..."
                                                     th:src="@{${blog.avatars}}" class="ui avatar image">
                                                <div class="content"><a href="#" class="header"
                                                                        th:text="${blog.createUser}"> sansui</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar alternate outline icon"></i><span
                                                    th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm:ss')}"> 2020-02-17</span>
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>&nbsp&nbsp<span
                                                    th:text="${blog.views}">123</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" th:href="@{/types/(typeId=${blog.typesId})}"
                                           class="ui label teal basic m-padded-tiny m-text-thin"
                                           th:text="${blog.typeName}">认知升级</a>
                                    </div>
                                </div>
                            </div>

                            <!--                            <div class="five wide column">-->
                            <!--                                <a href="" target="_blank">-->
                            <!--                                    <img src="https://static.4ce.cn/star3/origin/31241044ab9fd376bb86f33db3f55e22.png" alt="图片正在路上..."-->
                            <!--                                         class="ui rounded image">-->
                            <!--                                </a>-->
                            <!--                            </div>-->
                        </div>
                    </div>
                </div>
                <!--footer-->
                <div class="ui bottom attached segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <div class="item">
                                <a class="ui mini teal basic button"
                                   th:href="@{/index/(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}"
                                   th:if="${pageInfo.hasPreviousPage}">上一页</a>
                                <span class="column">当前第<span th:text="${pageInfo.pageNum}"></span>页，总<span
                                        th:text="${pageInfo.pages}"></span>页，共
                            <span th:text="${pageInfo.total}">

                                </span>条记录</span>
                            </div>
                        </div>
                        <div class="right aligned column">
                            <div class="item"><a class="ui mini teal basic button"
                                                 th:href="@{/index/(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}"
                                                 th:if="${pageInfo.hasNextPage}">下一页</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--右边的top-->
            <div class="five wide column m-mobile-hide animated slideInRight">
                <div class="wide column m-mobile-hide animated slideInLeft">
                    <div class="ui top attached segment site-author"
                         style="background:url(https://s1.ax1x.com/2020/04/04/Gw3vUU.jpg) no-repeat center center;-webkit-background-size:cover;background-size:cover">
                        <a href="#" th:href="@{/admin/login}">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=1578393930&s=640" alt=""
                                 class="ui rounded image image-tx">
                        </a>
                        <div class="ui  header" style="text-align: center">三岁</div>
                    </div>
                    <div class="ui yellow attached segment">
                        <p style="text-align: center" id="binft"></p>
                    </div>
                </div>
                <!--分类-->

                <div class="ui styled fluid accordion m-margin-large">
                    <div class="title active">
                        <i class="idea icon"></i>
                        分类
                        <i class="dropdown icon"></i>
                    </div>
                    <div class="ui teal segment content active">
                        <div class="ui fluid vertical menu">
                            <a href="#" th:href="@{/types/(typeId=${type.typeid})}" class="item"
                               th:each="type:${types}">
                                <span th:text="${type.typename}">学习日志</span>
                                <div class="ui teal basic left pointing label" th:text="${type.blognum}">13</div>
                            </a>
                        </div>
                    </div>
                </div>

                <!--标签-->
                <link rel="stylesheet" href="../../../static/css/TagCloud.css" th:href="@{/css/TagCloud.css}">
                <script src="../../../static/js/TagCloud.js" th:src="@{/js/TagCloud.js}"></script>

                <div class="ui styled fluid accordion m-margin-large">
                    <div class="title active">
                        <i class="tags icon"></i>
                        <span>标签</span>
                    </div>
                </div>
                <div id="tagCloud">
                    <a href="#" th:href="@{/tags/(tagId=${tag.tagId})}" target="_blank" th:each="tag:${tags}">
                        <span th:text="${tag.tagName}">中国</span>
                    </a>
                </div>

                <!--最新推荐-->
                <div class="ui styled fluid accordion m-margin-large">
                    <div class="title active">
                        <i class="bookmark icon"></i>
                        推荐阅读
                        <i class="dropdown icon"></i>
                    </div>

                    <div class="ui teal segment content active">
                        <div class="ui fluid vertical menu">
                            <a href="#" th:href="@{/blogs/{id}(id=${blog.blogId})}" class="item"
                               th:each="blog : ${recommendedBlogs}">
                                <i class="hotjar icon" style="color: #ff0000;"></i>
                                <span th:text="${blog.title}">测试文章1</span>
                            </a>
                        </div>
                    </div>
                </div>

                <!--二维码-->
                <h4 class="ui horizontal divider header m-margin-large">扫码关注我</h4>
                <div class="ui card centered" style="width: 10em">
                    <img src="./static/images/ewm.png" th:src="@{/images/ewm.png}" alt="图片正在赶来的路上..." title="扫码关注我"
                         class="ui rounded image">
                </div>
            </div>
        </div>
    </div>
</div>

<div id="toolbar" class="m-fixed m-right-bottom m-padded-big" style="display: none">
    <div id="totop-button" class="ui icon teal button"><i class="chevron up icon"></i></div>
</div>

<!--音乐播放器-->
<div th:replace="theme/default/common :: aplayer"></div>
<!--底部footer-->
<!--inverted 黑色背景-->
<footer th:replace="theme/default/common :: footer" class="ui inverted vertical segment footer-bj">
    <div class="ui center aligned container m-text-lined">
        <div class="m-text-thin m-text-spaced m-opacity-mini">【事实并非理所当然<span class="blink">❤️</span>世界总是欲盖弥彰】</div>
        <div class="m-text-thin m-text-spaced m-opacity-mini">本站勉强运行:<span id="runtime_span"
                                                                           style="color: #24a0f0;"></span></div>
        <div class="m-text-thin m-text-spaced m-opacity-mini">友情链接：<a href="#">申请坑位</a>/<a href="#">申请坑位</a>/<a
                href="#">申请坑位</a></div>
        <div class="ui inverted  divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2022 Designed by sansui</p>
    </div>
</footer>

<!--/*/<th:block th:replace="theme/default/common :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="../../../static/lib/waypoints/jquery.waypoints.min.js"></script>
<script src="../../../static/lib/aplayer/APlayer.min.js"></script>
<script src="../../../static/lib/aplayer/Meting.min.js"></script>
<script src="../../../static/js/me.js"></script>
<!--/*/</th:block>/*/-->

<script>
    yiyan();
</script>
</body>
</html>